<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单页面</title>
    <!--bootstrap-->
    <link href="/shop-app/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/shop-app/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/shop-app/bootstrap/js/bootstrap.min.js"></script>
    <script src="/shop-app/js/CacheUtil.js"></script>
    <script src="/shop-app/js/HttpUtil.js"></script>
    <script src="/shop-app/js/OrdersUtils.js"></script>
    <script src="../js/UserCacheUtil.js"></script>
</head>
<body>

<!--导入页面公共头部-->
<div class="Top_header"></div>

<!--  订单页分状态导航栏  -->
<nav class="navbar navbar-default col-xs-10 col-xs-offset-1">
    <div class="container ">
        <div>
            <ul class="nav nav-pills ">
                <li role="presentation" class="active" id="showAll"><a href="#">所有订单</a></li>
                <li role="presentation" id="show_0" value="0"><a href="#">待付款</a></li>
                <li role="presentation" id="show_1" value="1"><a href="#">待发货</a></li>
                <li role="presentation" id="show_3" value="3"><a href="#">待评价</a></li>
            </ul>
        </div>
    </div><!-- /.container-fluid -->
</nav>


<!--  订单页搜索栏  -->
<nav class="navbar navbar-default col-xs-10 col-xs-offset-1">
    <div class="container ">
        <div>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="输入订单编号进行查询" style="width: 250px" id="oId">
                </div>

            </form>
            <button type="button" class="btn btn-default" id="selectOrder">订单搜索</button>
        </div>
    </div><!-- /.container-fluid -->
</nav>


<!--内联框-->
<div class="">
    <script type="text/javascript">
        // <!--  点击所有订单按钮,展示所有订单信息 start -->
        $("#showAll").click(
            function () {
                console.log('将要跳转至展示所有订单信息页面');
                // $(".dv_content").attr("src","/shop-app/orders/orderList.html");
                $(".dv_content").load("/shop-app/orders/orderList.html");
            });
        <!--  点击所有订单按钮,展示所有订单信息 end -->

        <!--  点击按订单编号查询的按钮,展示对象订单编号的订单信息 start -->
        $("#selectOrder").click(function () {
            console.log('跳转成功');
            console.log("获取到的用户ID：");
            let uId = getLocalStorage("loginUser").uId;
            console.log($("#oId").val());
            // 发送ajax请求（传参(oId)给后端）
            $.ajax({
                url: '/shop-api/orders/findOrderByOid',
                type: 'post',
                data: JSON.stringify({
                    uId:uId ,
                    oId: $("#oId").val()
                }),
                contentType: "application/json",
                // ajax请求后端数据成功
                success: function (data) {
                    console.log('将要跳转至根据订单编号查询的订单信息页面')
                    console.log(data);
                    // order.html页面将后端返回的数据传递给orderByOid.html页面
                    saveOrder(data);
                    // 内联框中跳转
                    // $(".dv_content").attr("src","/shop-app/orders/orderByOid.html");
                    // $(".dv_content").load("/shop-app/orders/orderByOid.html");
                    //重定向
                    $(window).attr('location', '/shop-app/orders/orderByOid.html');
                }
            })
        });
        // <!--  点击按订单编号查询的按钮,展示对象订单编号的订单信息 end -->

        // <!--  展示所有待发货订单信息 start -->
        $("#show_0").click(function () {
            console.log('跳转成功')
            //获取前端发送请求的参数
            console.log('跳转成功');
            console.log("获取到的用户ID：");
            let uId = getLocalStorage("loginUser").uId;
            console.log($("#show_0").val());
            // 发送ajax请求（传参(oId)给后端）
            $.ajax({
                url: '/shop-api/orders/findOrderByOstate',
                type: 'post',
                data: JSON.stringify({
                    uId:uId,
                    oState: $("#show_0").val()
                }),
                contentType: "application/json",
                // ajax请求后端数据成功
                success: function (data) {
                    console.log(data); //控制台打印后端返回的数据
                    console.log('将要跳转至待付款订单页面');
                    // order.html页面将后端返回的数据传递给orderByOid.html页面
                    saveOrder(data);
                    // 内联框中跳转
                    // $(".dv_content").attr("src","/shop-app/orders/0.html");
                    $(".dv_content").load("/shop-app/orders/0.html");
                }
            })

        });
        // <!--  展示所有待发货订单信息 end -->

        // <!--  展示所有待发货订单信息 start -->
        $("#show_1").click(function () {
            console.log('跳转成功')
            //获取前端发送请求的参数
            console.log('跳转成功');
            console.log("获取到的用户ID：");
            let uId = getLocalStorage("loginUser").uId;
            console.log($("#show_1").val());
            // 发送ajax请求（传参(oId)给后端）
            $.ajax({
                url: '/shop-api/orders/findOrderByOstate',
                type: 'post',
                data: JSON.stringify({
                    uId:uId,
                    oState: $("#show_1").val()
                }),
                contentType: "application/json",
                // ajax请求后端数据成功
                success: function (data) {
                    console.log(data); //控制台打印后端返回的数据
                    console.log('将要跳转至待发货订单页面');
                    // order.html页面将后端返回的数据传递给orderByOid.html页面
                    saveOrder(data);
                    // 内联框中跳转
                    // $(".dv_content").attr("src","/shop-app/orders/1.html");
                    $(".dv_content").load("/shop-app/orders/1.html");
                }
            })

        });
        <!--  展示所有待发货订单信息 end -->


        <!--  展示所有待评价订单信息 start -->
        $("#show_3").click(function (oId) {

            console.log(oId);
            //获取前端发送请求的参数
            console.log('跳转成功');
            console.log("获取到的用户ID：");
            let uId = getLocalStorage("loginUser").uId;
            console.log($("#show_3").val());
            // 发送ajax请求（传参(oId)给后端）
            $.ajax({
                url: '/shop-api/orders/findOrderByOstate',
                type: 'post',
                data: JSON.stringify({
                    uId:uId,
                    oState: $("#show_3").val()
                }),
                contentType: "application/json",
                // ajax请求后端数据成功
                success: function (data) {
                    console.log(data); //控制台打印后端返回的数据
                    console.log('将要跳转至待评价订单页面');
                    // order.html页面将后端返回的数据传递给orderByOid.html页面
                    saveOrder(data);
                    // 内联框中跳转
                    // $(".dv_content").attr("src","/shop-app/orders/3.html");
                    $(".dv_content").load("/shop-app/orders/3.html");

                }
            })

        });
        <!--  展示所有待评价订单信息 end -->
        // $(".Top_header").load("../include/header/header.html");
        $(".Top_header").load("/shop-app/include/header.html");
    </script>

    <!-- 内联框   -->
    <div class="dv_content">
        <!--        <iframe class="dv_content"   width="100%" height="300px" frameborder="0" scrolling="no" >-->

        <!--        </iframe>-->
    </div>
</div>
</body>
</html>